import { useEffect, useState } from "react";
import {
  deleteListApi,
  getListApi,
  postListApi,
  putListApi,
  type GetListApiParamsState,
} from "../../api/list";
import {
  Button,
  Space,
  Table,
  Modal,
  Row,
  Col,
  Form,
  Input,
  Image,
} from "antd";
import type { ColumnsType } from "antd/es/table";
import { useSetState } from "ahooks";
import CostomSearch from "../../components/costomSearch";
export interface ListDataItemType {
  id: string;
  // 地址
  shopAddress: string;
  // 介绍
  shopDescription: string;
  shopImage: string;
  // 米给你回层
  shopName: string;
  shopScore: string;
  shopSellCount: string;
  shopTel: string;
  shopType: string;
}

const List = () => {
  const [listData, setListData] = useState([]);
  const [total, setTotal] = useState(0);
  const [params, setParams] = useSetState<GetListApiParamsState>({
    pageCode: 1,
    pageSize: 5,
  });
  const [deleteIdArr, setDeleteIdArr] = useState<React.Key[]>([]);
  const getListData = async () => {
    const resp = await getListApi(params);
    const { totalCount, data } = resp.data.data;
    setListData(data);
    setTotal(totalCount);
  };
  const handleDelete = async (id: string) => {
    Modal.confirm({
      title: "确认要删除吗？",
      okText: "确认",
      cancelText: "取消",
      async onOk() {
        await deleteListApi(id);
        await getListData();
      },
    });
  };
  const handleDeleteMore = () => {
    // 获取删除数据的id
    handleDelete(deleteIdArr.toString());
  };
  const columns: ColumnsType<ListDataItemType> = [
    {
      key: "shopName",
      dataIndex: "shopName",
      title: "店铺名称",
    },
    {
      key: "shopAddress",
      dataIndex: "shopAddress",
      title: "店铺地址",
    },
    {
      key: "shopDescription",
      dataIndex: "shopDescription",
      title: "店铺介绍",
    },
    {
      key: "shopImage",
      dataIndex: "shopImage",
      title: "店铺图片",
      render(src) {
        return <Image src={src} height={50}></Image>;
      },
    },
    {
      key: "opration",
      dataIndex: "opration",
      title: "操作",
      render(value, record) {
        return (
          <Space>
            <Button type="primary" onClick={() => handleEdit(record)}>
              编辑
            </Button>
            <Button onClick={() => handleAdd()}>添加</Button>

            <Button
              type="primary"
              danger
              onClick={() => handleDelete(record.id)}
            >
              删除
            </Button>
          </Space>
        );
      },
    },
  ];

  const searchConfig = [
    {
      type: "text",
      name: "searchValue",
      label: "搜索",
      placeholder: "请输入搜索的内容",
    },
    {
      type: "text",
      name: "type",
      label: "类型",
      placeholder: "请输入搜索的类型",
    },
    {
      type: "text",
      name: "minScore",
      label: "最小分数",
      placeholder: "请输入最小分数",
    },
    {
      type: "text",
      name: "maxScore",
      label: "最大分数",
      placeholder: "请输入最大分数",
    },
  ];

  const handleSearch = (values: any) => {
    setParams(values);
  };

  const [open, setOpen] = useState(false);
  const [form] = Form.useForm();
  const [isEdit, setIsEdit] = useState(false)

  const handleEdit = (record: ListDataItemType) => {
    form.resetFields();
    form.setFieldsValue(record);
    setOpen(true);
    setIsEdit(true)
  };
  const handleAdd = () => {
    form.resetFields();
    setOpen(true);
    setIsEdit(false)
  };

  const handleOk = async () => {
    const newData = form.getFieldsValue();
    if (isEdit) {
      await postListApi(newData);
    } else {
      await putListApi(newData);
    }

    await getListData();
    setOpen(false);
  };

  useEffect(() => {
    getListData();
  }, [params]);

  return (
    <div>
      <CostomSearch
        searchConfig={searchConfig}
        handleSearch={handleSearch}
        handleReset={() =>
          setParams({
            searchValue: "",
            type: "",
            minScore: "",
            maxScore: "",
          })
        }
      ></CostomSearch>
      <div>
        <Button
          type="primary"
          danger
          onClick={() => handleDeleteMore()}
          disabled={deleteIdArr.length === 0}
        >
          批量删除
        </Button>
      </div>
      <Table<ListDataItemType>
        columns={columns}
        dataSource={listData}
        rowKey={"id"}
        pagination={{
          position: ["bottomCenter"],
          current: params.pageCode,
          pageSize: params.pageSize,
          total: total,
          onChange(page, pageSize) {
            setParams({
              pageCode: page,
              pageSize: pageSize,
            });
          },
        }}
        rowSelection={{
          type: "checkbox",
          onChange(selectedRowKeys) {
            setDeleteIdArr(selectedRowKeys);
          },
        }}
        expandable={{
          rowExpandable: () => true,
          expandedRowRender(v) {
            return (
              <div style={{ padding: 30 }}>
                <Row style={{ marginBottom: 10, color: "#999" }}>
                  <Col span={2}>店铺名称</Col>
                  <Col span={10} style={{ color: "#333" }}>
                    {v.shopName}
                  </Col>
                  <Col span={2}>店铺地址</Col>
                  <Col span={10} style={{ color: "#333" }}>
                    {v.shopAddress}
                  </Col>
                </Row>
                <Row style={{ marginBottom: 10, color: "#999" }}>
                  <Col span={2}>店铺介绍</Col>
                  <Col span={10} style={{ color: "#333" }}>
                    {v.shopDescription}
                  </Col>
                  <Col span={2}> 店铺 ID</Col>
                  <Col span={10} style={{ color: "#333" }}>
                    {v.id}
                  </Col>
                </Row>
                <Row style={{ marginBottom: 10, color: "#999" }}>
                  <Col span={2}>联系电话</Col>
                  <Col span={10} style={{ color: "#333" }}>
                    {v.shopTel}
                  </Col>
                  <Col span={2}> 评分</Col>
                  <Col span={10} style={{ color: "#333" }}>
                    {v.shopScore}
                  </Col>
                </Row>
                <Row style={{ marginBottom: 10, color: "#999" }}>
                  <Col span={2}>销售量</Col>
                  <Col span={10} style={{ color: "#333" }}>
                    {v.shopSellCount}
                  </Col>
                  <Col span={2}> 分类</Col>
                  <Col span={10} style={{ color: "#333" }}>
                    {v.shopType}
                  </Col>
                </Row>
              </div>
            );
          },
        }}
      ></Table>

      <Modal
        onCancel={() => setOpen(false)}
        onOk={() => handleOk()}
        title="编辑|添加"
        okText="确定"
        cancelText="取消"
        open={open}
      >
        <Form form={form}>
          <Form.Item label="店铺ID" name="id">
            <Input placeholder="请输入店铺ID" disabled></Input>
          </Form.Item>
          <Form.Item label="店铺名称" name="shopName">
            <Input placeholder="请输入店铺名称"></Input>
          </Form.Item>
          <Form.Item label="店铺地址" name="shopAddress">
            <Input placeholder="请输入店铺地址"></Input>
          </Form.Item>
          <Form.Item label="店铺描述" name="shopDescription">
            <Input placeholder="请输入店铺描述"></Input>
          </Form.Item>
          <Form.Item label="店铺电话" name="shopTel">
            <Input placeholder="请输入店铺电话"></Input>
          </Form.Item>
          <Form.Item label="店铺分数" name="shopScore">
            <Input placeholder="请输入店铺分数"></Input>
          </Form.Item>
          <Form.Item label="店铺销售" name="shopSellCount">
            <Input placeholder="请输入店铺销售"></Input>
          </Form.Item>
          <Form.Item label="店铺类型" name="shopType">
            <Input placeholder="请输入店铺类型"></Input>
          </Form.Item>
          <Form.Item label="店铺图片" name="shopImage">
            <Input placeholder="请输入店铺图片"></Input>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default List;
